import React from 'react';
import { Menu, MenuItem, SubMenu } from './index';

/**
 * Menu 组件使用示例
 * 展示 Menu 组件的各种用法和功能特性
 */
export const MenuExample: React.FC = () => {
  /**
   * 菜单项选择回调函数
   * @param index - 被选中的菜单项索引
   */
  const handleSelect = (index: string) => {
    console.log('选中了菜单项:', index);
  };

  return (
    <div style={{ padding: '20px' }}>
      {/* 示例标题 */}
      <h2>Menu 组件示例</h2>
      
      {/* 示例1：水平菜单 */}
      <h3>1. 水平菜单</h3>
      <Menu onSelect={handleSelect}>
        {/* 普通菜单项 */}
        <MenuItem>首页</MenuItem>
        <MenuItem>产品</MenuItem>
        
        {/* 禁用菜单项 */}
        <MenuItem disabled>服务</MenuItem>
        
        {/* 子菜单 */}
        <SubMenu title="更多">
          <MenuItem>关于我们</MenuItem>
          <MenuItem>联系我们</MenuItem>
          <MenuItem>帮助中心</MenuItem>
        </SubMenu>
      </Menu>

      {/* 示例2：垂直菜单 */}
      <h3 style={{ marginTop: '40px' }}>2. 垂直菜单</h3>
      <Menu 
        mode="vertical" 
        style={{ width: '200px' }} // 设置固定宽度
      >
        <MenuItem>个人资料</MenuItem>
        <MenuItem>账户设置</MenuItem>
        
        {/* 垂直子菜单 */}
        <SubMenu title="系统设置">
          <MenuItem>权限管理</MenuItem>
          <MenuItem>日志查看</MenuItem>
        </SubMenu>
        
        <MenuItem>退出登录</MenuItem>
      </Menu>

      {/* 示例3：默认选中和展开 */}
      <h3 style={{ marginTop: '40px' }}>3. 默认选中和展开</h3>
      <Menu 
        defaultIndex="1"           // 默认选中第二个菜单项
        defaultOpenSubMenus={['3']} // 默认展开索引为3的子菜单
      >
        {/* 显式指定索引的菜单项 */}
        <MenuItem index="0">选项一</MenuItem>
        <MenuItem index="1">选项二</MenuItem>
        
        {/* 显式指定索引的子菜单 */}
        <SubMenu index="3" title="选项三">
          <MenuItem>子选项一</MenuItem>
          <MenuItem>子选项二</MenuItem>
        </SubMenu>
      </Menu>
    </div>
  );
};

export default MenuExample;